<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col">
			<view class="fun-flex-row fun-justify-between fun-items-center section_2">
				<view class="fun-flex-row fun-items-center serach-bar">
					<image class="image_4" src="@/static/product/search.png" />
					<input class="font text_4 fun-ml-4" v-model="form.name" type="text" placeholder="Please enter product keywords/ticker"></text>
				</view>
				
				<view class="fun-flex-col fun-items-center text-wrapper_2" @click="getProductList">Search</view>
			</view>
		</view>
		
		<view class="fun-flex-row fun-justify-between fun-items-center group">
			<text class="font_2 tab"
			  v-for="item in tabList"
			  :key='item.value'
			  :class="item.value == isCurr ? 'text-wrapper_3' : ''"
			  @click="changeTab(item)"
			>{{item.label}}</text>
		</view>
		
		<scroll-view  @scrolltolower="scrolltolower" scroll-y="true" enable-back-to-top="true" class="group_2" :style="{height: (windosHeight - 30 - 70 - 22) + 'px'}">
			<view class="fun-flex-col list-item" v-for="item in productList" :key="item.id" @click="toDetail(item)">
				<view class="fun-flex-row fun-items-center">
					<text class="font_3 title">{{item.name}}</text>
					<image class="image_5"	src="@/static/home/hot.png" v-if='item.status == 2'/>
					<image class="image_5"	src="@/static/home/sold_out.png" v-if='item.status == 3'/>
					<image class="image_5"	src="@/static/home/open.png" v-if='item.status == 1'/>
				</view>
				
				<view class="middle fun-mt-10">
					<view class="fun-flex-row fun-justify-between fun-items-center">
						<text class="font text-item">EAR:</text>
						<text class="font_2 text-item">Minimum Investment:</text> 
					</view>
					
					<view class="fun-mt-8 fun-flex-row fun-justify-between fun-items-center">
						<text class="font_4 text-item">{{item.oneYear}}%</text>
						<text class="font_3 text-item">${{item.minimumamount}}</text>
					</view>
				</view>
				
				<view class="divider view"></view>
				
				<view class="fun-flex-row fun-items-center fun-justify-between group_4">
					<text class="font_2 text_3 text_13">Ticker: {{item.ticker}}</text>
					<text class="font text_14">Lock-up Period:{{item.days}} days</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getTimeZone} from "@/common/js/func.js"
	import {productList} from "@/api/products.js"
	export default {
		data() {
			return {
				form:{
					name:"",
					page:1,
					limit:10,
					assettype:1,
					timeZone:8
				},
				isCurr:"1",
				productList:[],
				total:0,
				tabList:[
					{label:"ALL",value:"0"},
					{label:"Stocks",value:"1"},
					{label:"Fixed Income",value:"6"},
					{label:"Crypto",value:"5"},
					{label:"Forex",value:"4"}
				],
				windosHeight:"" //可使用窗口高度(不包含NavigationBar和TabBar的高度)
			};
		},
		
		onLoad() {
			this.form.timeZone = getTimeZone();
			uni.getSystemInfo({
				success: res => {
					this.windosHeight = res.windowHeight
				}
			})
			setTimeout(() => {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		
		onPullDownRefresh() {
			this.productList = [];
			this.form.page = 1;
			this.getProductList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			getProductList(){
				this.form.assettype = this.UTILS.stringToNum(this.form.assettype);
				productList(this.form).then(res => {
					if(res.code == 0){
						this.productList = this.productList?.concat(res?.data || []) || [];
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.productList.length) {
					this.form.page++;
					this.getProductList();
				}
			},
			
			changeTab(item){
				this.isCurr = item.value;
				this.form.assettype = item.value;
				this.productList = [];
				this.form.page = 1;
				this.getProductList();
			},
			
			toDetail(item){
				if(item.assettype == 6){//固收基金
					uni.navigateTo({url:`/pages/home/fixedIncomeDetail?name=${item.name}&pid=${item.id}`})
				}
				else{
					uni.navigateTo({url:`/pages/products/productDetail?name=${item.name}&pid=${item.id}`})
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}
	.mt-11 {
		margin-top: 22rpx;
	}
	.mt-7 {
		margin-top: 14rpx;
	}
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 12rpx 32rpx 32rpx 32rpx;
		.section_2 {
			padding: 4rpx 4rpx 4rpx 24rpx;
			background-color: #b0b1bf24;
			border-radius: 10rpx;
			.serach-bar{
				flex: 1;
				height: 100%;
				.image_4 {
					opacity: 0.5;
					width: 32rpx;
					height: 32rpx;
				}
				input{
					width: 100%;
					height: 100%;
				}
			}
			.text-wrapper_2 {
				padding: 12rpx 16rpx;
				background-color: #1a7b99;
				border-radius: 10rpx;
				color: #ffffff;
				font-weight: 500;
				font-size: 24rpx;
			}
		}

		.group {
			margin-top: 36rpx;
			margin-bottom: 48rpx;
			.tab{
				padding: 8rpx 20rpx;
				font-size: 12px;
				color: #999;
			}
			.text-wrapper_3 {
				background-color: #ffffff80;
				border-radius: 20rpx;
				border: solid 2rpx #000000;
				color: #000;
			}
		}
		.font_2 {
			font-size: 24rpx;
			font-family: SF Pro Display;
			color: #000000;
		}
		.text_3 {
			opacity: 0.5;
		}
		.font {
			font-size: 24rpx;
			font-family: SF Pro Display;
			color: #000000;
		}
		.group_2 {
			.list-item {
				width: 100%;
				padding:24rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				border: solid 2rpx #f0f0f0;
				margin-top: 24rpx;
				position: relative;
				.title{
					flex: 1;
				}
				&:first-child {
					margin-top: 0;
				}
				.font_3 {
					font-size: 28rpx;
					font-family: SF Pro Display;
					font-weight: bold;
					color: #000000;
				}
				.image_5 {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
				
				.font_4 {
					font-size: 28rpx;
					font-family: SF Pro Display;
					font-weight: 700;
					color: #52844f;
				}
				.divider {
					background-color: #00000033;
					height: 2rpx;
				}
				.view {
					margin-top: 20rpx;
				}
				.group_4 {
					padding-top: 20rpx;
				}
				.middle{
					.text-item{
						flex:1
					}
				}
			}
		}
	}
</style>